<template>
	<view class="apply-return">

		<view class="r_btn" @click="quan">全部退款</view>

		<view class="return-good">
			<view class="border padding-15 order-num align_center">
				<text class="iconfont" :class="allCheck?'icondanxuanfuxuan':'iconico2'"
					:style="{'color':allCheck?'#FF7133':'#999'}" @click="allCheckGood"></text>
				<text class="fs-13" style="margin-left: 20rpx;">订单编号：{{info.order_num}}</text>
			</view>
			<view class="">
				<view class="" v-for="(item,index) in info.goods" class="sign-good " :key="index">

					<view class="flex_ac">

						<view class="align_center">
							<text class="iconfont" :class="item.checked?'icondanxuanfuxuan':'iconico2'"
								:style="{'color':item.checked?'#FF7133':'#999'}" @click="selectCheck(index)"></text>
						</view>
						<view class="flex_ac flex-full content_box">
							<view class="img">
								<image :src="imgRemote+item.goods_img" mode="aspectFit" class="r-5"></image>
							</view>
							<view class="info flex-column flex-full ">
								<view class="bold two-line">
									{{item.goods_name}}
								</view>
								<!-- 	<view>
								<text class="fs-11 gray_font">净重：</text>
								<text class="fs-11 gray_font">{{item.jz}}斤<text v-if="item.unit">/{{item.unit}}</text>
								</text>
							</view> -->
								<view>
									<text class="fs-11 gray_font">单价：</text>
									<text class="fs-11 gray_font">￥{{item.market_price}}
									</text>
								</view>
								<!-- <view v-if="item.yt>0">
								<text class="fs-11 gray_font">已退：</text>
								<text class="fs-11 gray_font">{{item.yt}}斤
								</text>
							</view> -->
								<view>
									<text class="fs-11 gray_font">购买数量：</text>
									<text class="fs-13 bold">{{item.buy_num}}/{{item.unit}}</text>
								</view>

								<view class="input_box">
									<view class="fs-11 gray_font">退货单位:</view>

									<u-radio-group @change="sum" v-model="item.runit" placement="column"
										activeColor="#FF7133">
										<u-radio v-for="(items,indexs) in item.runitList" :key="indexs"
											:name="items.id">
											{{items.name}}
										</u-radio>

									</u-radio-group>

								</view>

								<view class="input_box" v-if="item.runit==2">
									<view class="fs-11 gray_font">退货数量:</view>
									<u-number-box @change="sum" :min="1" :max="item.ke_num"
										v-model="item.u_num"></u-number-box>
								</view>

								<view class='input_box' v-if="item.runit==1">
									<view class="fs-11 gray_font">退货数量:</view>
									<u-number-box :positive-integer="false" :step="0.01" :length="2" @change="sum"
										:min="0" :max="item.jzs" v-model="item.j_num"></u-number-box>
								</view>
							</view>

						</view>

					</view>

					<div class="flex_ac fs-12 gray_font" v-if="item.good_price||item.fw_price||item.yf_price">退款:
						<view class="ml" v-if="item.good_price>0"> 商品金额: ￥{{item.good_price}}</view>
						<view class="ml" v-if="item.fw_price>0"> 服务费: ￥{{item.fw_price}}</view>
						<view class="ml" v-if="item.yf_price>0"> 运费: ￥{{item.yf_price}}</view>
						<view class="ml" v-if="item.jrs_price>0"> 金融手续费: ￥{{item.jrs_price}}</view>
					</div>
					</div>

				</view>
			</view>
		</view>
		<view class="explain" style="margin:30rpx;">
			<view class="flex_left_right bold return-money border">
				<text>支付金额：</text>
				<text class="red-font">￥{{info.pay_total}}</text>
			</view>
			<view v-if="info.r_p" class="flex_left_right bold return-money border">
				<text>已退金额：</text>
				<text class="red-font">￥{{info.r_p}}</text>
			</view>

			<!-- <view class="flex_left_right  return-money border" @click="show=true">
				<text class="bold">售后类型</text>
				<text class="gray_font">{{rtype}}</text>
			</view> -->

			<view class="flex_left_right  return-money border">
				<text class="bold">退款金额：</text>
				<text class="red-font">￥{{total.hj}}</text>
			</view>
			<view class="more-reason flex">
				<text class="bold">退款说明：</text>
				<textarea v-model="refund_desc" maxlength=50 placeholder="选填" />
			</view>
			<view class="right gray_font">{{refund_desc.length}}/50</view>
		</view>
		<view>
			<view class="bold" style="padding: 30rpx 0;">上传凭证：</view>
			<view class="flex ">
				<view v-for="(item,index) in file" :key="index">
					<image :src="item" mode="aspectFill" class="camera">
					</image>
					<text class="delete-img" @click="file.splice(index,1)">x</text>
				</view>
				<view class="flex-column camera align_center" @click="showUpload('open')">
					<text class="iconfont iconpaizhao"></text>
					<text class="fs-11 gray_font">上传图片</text>
				</view>
			</view>
		</view>
		<view class="submit" @click="submit"> 提交</view>
		<uni-popup ref="popup" type="bottom">
			<view class="upload-img">
				<view class="white_b r-10">
					<view class="border method" @click="chooseImage('album')">本地上传</view>
					<view class="method" @click="chooseImage('camera')">拍照上传</view>
				</view>
				<view class="white_b method r-10 cancel" @click="showUpload('close')">
					取消
				</view>
			</view>
		</uni-popup>

		<u-select labelName="name" valueName="id" mode="single-column" v-model="show" :list="rtypeList"
			@confirm="confirm"></u-select>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				info: [],
				allCheck: false,
				imgRemote: getApp().globalData.imgRemote,
				totalPrice: 0,
				file: [],
				id: '',
				refund_desc: '',
				money: 0,
				order_goods_num: '',
				rtype_id: '',
				rtype: '请选择售后类型',
				rtypeList: [],
				show: false,
				total: {
					hj: 0
				}
			}
		},
		methods: {
			async quan() {

				await this.getInfo(2);

				this.allCheck = true;

			},
			confirm(e) {
				let item = e[0];
				this.rtype = item.label;
				this.rtype_id = item.value;
			},
			sum() {

				let params = {
					token: uni.getStorageSync('userToken')
				};
				params.goods = this.info.goods;
				params.order_id = this.id;
				this.$post(this.$api.refundSum, params, res => {
					let {
						data
					} = res;

					if (data.code == 1) {

						this.info.goods = data.data.list;
						this.total = data.data.total;

					}
				})

			},
			showUpload(way) {
				if (way == 'open') {
					this.$refs.popup.open();
				} else {
					this.$refs.popup.close();
				}

			},
			chooseImage(type) {
				let _ = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], //从相册选择
					success(res) {
						let file = res.tempFilePaths;

						_.$refs.popup.close();
						for (let i in file) {
							uni.uploadFile({
								url: getApp().globalData.rootUrl + _.$api.mainUpload, //此处换上你的接口地址
								name: 'file',
								filePath: file[i],
								success: function(res1) {
									_.file = _.file.concat(_.imgRemote + JSON.parse(res1.data).data);
								}
							})
						}

					}
				});
			},

			allCheckGood() {
				this.allCheck = !this.allCheck;
				this.info.goods.map((item) => {
					item.checked = this.allCheck;
					return item;
				})
				this.selectCheck();
			},
			selectCheck(index) {
				if (index >= 0) {
					this.info.goods[index].checked = !this.info.goods[index].checked;

				}
				this.allCheck = this.info.goods.every((item) => {
					return item.checked == true;
				})
				this.calculate();
			},
			calculate() {
				this.sum();
			},

			submit() {
				let selectGoods = this.info.goods.filter((item) => {
					return item.checked == true
				})


				if (selectGoods.length < 1) {
					return this.$Toast('请选择退货商品')
				}
				this.$showModal('确认退货？', () => {
					let params = {
						token: uni.getStorageSync('userToken'),
						order_id: this.id,
						goods: selectGoods,
						rtype_id: this.rtype_id,
						refund_desc: this.refund_desc,
						refund_images: this.file.join(','),

					};

					this.$post(this.$api.refundSh, params, (res) => {
						let {
							data
						} = res;
						if (data.code == 1) {
							this.$Toast(data.msg);
							getApp().globalData.isReload = true;
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/tabar/user'
								});
							}, 1000)

						} else {
							this.$Toast(data.msg)
						}
					})
				})

			},
			getInfo(type = 1) {
				this.$get(this.$api.orderRefunds, {
					token: uni.getStorageSync('userToken'),
					order_id: this.id,
					type: type
				}, res => {

					let {
						data
					} = res;

					if (data.code == 1) {
						this.info = data.data;

						if (type == 2) {
							this.sum();
						}

					}
				})
			},
			getType() {

				this.$get(this.$api.rtype, {}, res => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.rtypeList = data.data;
					}
				});

			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getInfo();
			//this.getType();
		}
	}
</script>

<style lang="scss" scoped>
	.flex_ac {
		display: flex;
		align-items: center;
	}

	.content_box {
		box-sizing: border-box;
		padding: 20rpx 0 10rpx 0;
	}

	.apply-return>view {
		background-color: white;
		border-radius: 10rpx;
		margin: 0 20rpx;

		&:nth-child(1) {
			margin-top: 30rpx;
		}

		&:nth-child(2),
		&:nth-child(3) {
			padding: 0 10rpx 30rpx;
		}

		&:nth-child(4) {
			margin-bottom: 20rpx;
		}

	}

	.apply-return {
		.order-num {
			height: 60rpx;
		}

		.sign-good {
			padding: 30rpx;
		}

		.return-good {
			.img {
				margin: 0 30rpx 0 20rpx;
				width: 168rpx;
				height: 168rpx;

				image {
					width: inherit;
					height: inherit;
				}
			}

			.info {
				padding: 30rpx 0;
				padding-bottom: 30rpx;
				justify-content: space-between;
			}

			.sign-good:nth-last-child(2) .info {
				//border-bottom: 1px solid #eee;
			}
		}

		.return-money {
			height: 88rpx;
		}

		.more-reason {
			padding-top: 30rpx;
		}

		textarea {
			width: 450rpx;
			height: 150rpx;
		}

		.delete-img {
			position: absolute;
			margin-left: -40rpx;
			margin-top: -13rpx;
			background: rgba(0, 0, 0, 0.5);
			width: 40rpx;
			height: 40rpx;
			text-align: center;
			line-height: 32rpx;
			color: white;
			border-radius: 50%;

		}

		.camera {
			.iconfont {
				font-size: 60rpx;
			}

			margin-right: 15rpx;
			justify-content: center;
			width:130rpx;
			height:130rpx;
			border: 1px dashed #eee;
		}

		.submit {
			background: #FF7133;
			color: white;
			border-radius: 39rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			margin-top: 21rpx;
		}

		.upload-img {
			margin: 0 30rpx;

			.method {
				height: 109rpx;
				line-height: 109rpx;
				text-align: center;
			}

			.cancel {
				margin: 30rpx 0;
			}
		}
	}

	.input_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 10rpx 0 0 0;
	}

	.th_box {
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.th_input {
		margin: 20rpx 0 0 0;
	}

	.r_btn {
		background: #FF7133 !important;
		color: white;
		border-radius: 39rpx;
		box-sizing: border-box;
		width: 200rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		margin: 20rpx 30rpx !important;
	}

	.ml {
		margin-left: 10rpx;
	}
</style>